import React from "react";
import { Post_dao } from "./Post";
import { Button, Space } from "antd";
import { useDispatch } from "react-redux";
import { postEmoji } from "../slice/postSlice";

interface Props {
    data: Post_dao;
}

const reactionEmoji = {
    thumbsUp: "👍",
    hooray: "🎉",
    heart: "❤️",
    rocket: "🚀",
    eyes: "👀",
};

/**
 * 帖子表情
 * */
const ReactionButtons = ({ data }: Props) => {
    const dispatch = useDispatch();
    const onAction = (type: string) => {
        dispatch(postEmoji({ id: data.id, type }));
    };
    return (
        <div>
            <Space>
                <Button
                    onClick={() => {
                        onAction("thumbsUp");
                    }}
                >
                    {reactionEmoji.thumbsUp} {data.reactions?.thumbsUp}
                </Button>
                <Button
                    onClick={() => {
                        onAction("hooray");
                    }}
                >
                    {reactionEmoji.hooray} {data.reactions?.hooray}
                </Button>
                <Button
                    onClick={() => {
                        onAction("heart");
                    }}
                >
                    {reactionEmoji.heart} {data.reactions?.heart}
                </Button>
                <Button
                    onClick={() => {
                        onAction("rocket");
                    }}
                >
                    {reactionEmoji.rocket} {data.reactions?.rocket}
                </Button>
                <Button
                    onClick={() => {
                        onAction("eyes");
                    }}
                >
                    {reactionEmoji.eyes} {data.reactions?.eyes}
                </Button>
            </Space>
        </div>
    );
};

export default ReactionButtons;
